import React, { Component } from "react";
import {
  BasicLayout,
  BasicLayoutSearch,
} from "../../../components/BasicLayout";
import {
  BasicPagination,
  compareNum,
  TableCustomize,
  openSuccessModal,
  openModalMessage,
  compareDate,
  compareString,
} from "../../../components/TableCustomize";
import {
  Button,
  Drawer,
  Alert,
  Badge,
  Divider,
  Modal,
  Select,
  Form,
} from "antd";
import { Link } from "react-router-dom";
import * as ERPDeliveryRecordService from "../../../axios/ERPDeliveryRecord";
import * as APIService from "../../../axios/api";
import TopForm from "./TopForm";
import PickingTable from "./PickingTable";
import img from "../../../assets/img/flame.png";
import SubmitOwe from "./SubmitOwe";
import { withRouter } from "react-router";
import { withPermission } from "../../../components/withpermission";
const RefreshButton = withPermission(Button, "sync");
const QRButton = withPermission(Button, "queren");
const FFButton = withPermission(Button, "fafang");
const { Option } = Select;

const printRows = 40;
class StayGrant extends Component {
  state = {
    pages: [],
    printRows: printRows,
    columns: [
      {
        title: "序号",
        dataIndex: "serialNumber",
        width: 60,
        render: (text, record, index) => (
          <div style={{ display: "flex" }}>
            <div>
              {(this.state.pageNum - 1) * this.state.pageSize + index + 1}
            </div>
            {/* {record.isRush === 1 || record.isRush === "1" ? (
              <img src={img} style={{ width: "18px", height: "18px" }} />
            ) : null} */}
          </div>
        ),
      },
      {
        title: "领料单号",
        dataIndex: "acceptCode",
        sorter: (a, b) => compareString(a.acceptCode, b.acceptCode),
        width: 150,
      },
      {
        title: "批号",
        dataIndex: "batchNo",
        sorter: (a, b) => compareString(a.batchNo, b.batchNo),
        width: 160,
      },
      {
        title: "机型",
        dataIndex: "model",
        sorter: (a, b) => compareString(a.model, b.model),
        width: 150,
      },
      {
        title: "领料车间",
        dataIndex: "departName",
        sorter: (a, b) => compareString(a.departName, b.departName),
        width: 160,
      },
      {
        title: "领料班组",
        dataIndex: "groupName",
        sorter: (a, b) => compareString(a.groupName, b.groupName),
        width: 130,
      },
      {
        title: "班组长",
        dataIndex: "groupLeader",
        sorter: (a, b) => compareString(a.groupLeader, b.groupLeader),
        width: 80,
      },
      {
        title: "领料项",
        dataIndex: "requestTotal",
        sorter: (a, b) => compareString(a.requestTotal, b.requestTotal),
        width: 80,
      },
      {
        title: "发料时间",
        dataIndex: "outTime",
        sorter: (a, b) => compareString(a.outTime, b.outTime),
        width: 150,
      },
      {
        title: "发料人",
        dataIndex: "userName",
        sorter: (a, b) => compareString(a.userName, b.userName),
        width: 150,
      },
      {
        title: "回写状态",
        dataIndex: "status",
        sorter: (a, b) => compareString(a.status, b.status),
        width: 150,
        render: (text) =>
          text == "已通过" ? (
            <Badge
              color="green"
              text={<span style={{ color: "green" }}>{text}</span>}
            />
          ) : text == "未通过" ? (
            <Badge
              status="error"
              text={<span style={{ color: "red" }}>{text}</span>}
            />
          ) : (
            ""
          ),
      },
      {
        title: "出库单号",
        dataIndex: "warehouseCode",
        sorter: (a, b) => compareString(a.warehouseCode, b.warehouseCode),
        width: 150,
      },
      {
        title: "操作",
        dataIndex: "opes",
        width: 200,
        render: (text, record, index) => (
          <div>
            <a onClick={this.particulars.bind(null, record)}>{"详情"}</a>
          </div>
        ),
      },
      { dataIndex: "" },
    ],
    dataSource: [],
    columnsInterior: [
      {
        title: "序号",
        dataIndex: "serialNumber",
        render: (text, record, index) => (
          <div style={{ display: "flex" }}>
            <div>
              {(this.state.pageNum - 1) * this.state.pageSize + index + 1}
            </div>
            {record.isRush === 1 || record.isRush === "1" ? (
              <img src={img} style={{ width: "18px", height: "18px" }} />
            ) : null}
          </div>
        ),
        width: 60,
      },
      {
        title: "物料编码",
        dataIndex: "partCode",
        sorter: (a, b) => compareNum(a.partCode, b.partCode),
        render: (text, record, index) => (
          <div>
            {record.partChangeAttitude === 1 ? (
              <Badge status="success" text={"新增"} />
            ) : record.partChangeAttitude === 2 ? (
              <Badge status="default" text={"取消"} />
            ) : record.partChangeAttitude === 3 ? (
              <Badge status="warning" text={"属性变化"} />
            ) : record.partChangeAttitude === 4 ? (
              <Badge status="processing" text={"回仓"} />
            ) : null}
            <div>{text}</div>
          </div>
        ),
        width: 100,
      },
      {
        title: "图号",
        dataIndex: "paperCode",
        key: "paperCode",
        sorter: (a, b) => compareNum(a.paperCode, b.paperCode),
        width: 150,
      },
      {
        title: "仓库",
        dataIndex: "storeName",
        width: 100,
      },
      {
        title: "装配组别",
        dataIndex: "assemblyGroup",
        key: "assemblyGroup",
        width: 130,
      },
      {
        title: "物料名称",
        dataIndex: "partName",
        key: "partName",
        width: 100,
      },
      {
        title: "物料规格",
        dataIndex: "partSpec",
        key: "partSpec",
        width: 100,
      },
      {
        title: "领料数量",
        dataIndex: "acceptNum",
        key: "acceptNum",
        sorter: (a, b) => compareNum(a.acceptNum, b.acceptNum),
        width: 100,
      },
      {
        title: "ERP库存数量",
        dataIndex: "erpNum",
        key: "erpNum",
        sorter: (a, b) => compareNum(a.erpNum, b.erpNum),
        width: 100,
      },
      {
        title: "发料状态",
        dataIndex: "outStatus",
        key: "outStatus",
        sorter: (a, b) => compareString(a.outStatus, b.outStatus),
        width: 100,
        render: (text, record, index) => (
          <div>
            {record.isLack === 1 ? (
              <Badge
                status="error"
                text={<span style={{ color: "red" }}>欠料</span>}
              />
            ) : null}
            <div>
              {text === 1 ? (
                <Badge
                  status="error"
                  text={<span style={{ color: "red" }}>待确认</span>}
                />
              ) : null}
            </div>
            <div>
              {text === 2 ? (
                <Badge status="processing" text="未完成" />
              ) : text === 3 ? (
                <Badge status="success" text="已完成" />
              ) : null}
            </div>
          </div>
        ),
      },
      { dataIndex: "" },
    ],
    dataSourceInterior: [],
    advanced: false,
    formData: {},
    drawerVisible: false,
    drawerVisible1: false,
    visible: false,
    showConceal: false,
    loginFlag: false,
    selectedRows: [],
    selectedRowKeys: [],
    selectedRowKeys1: [],
    selectedRows1: [],
    row: [],
    row1: [],
    pageNum: 1,
    pageSize: 100,
    total: 0,
    searchItem: {},
    workShopList: [],
    materialData: [],
    acceptMap: [],
    loadingDrawer: false,
    ERPReturn: null,
    submit: {},
    submits: {},
    submitOweMaterial: false,
    buttons: [],
    takeNumber: [],
    options: [],
    warehouse: [],
    pitchOnAffirm: [],
    fatherId: null,
    fatherData: null,
  };
  componentDidMount() {
    const { searchItem } = this.state;
    searchItem.storeName = localStorage.getItem("department");
    this.fetch();
    this.setState({
      searchItem,
    });
  }
  componentWillUnmount() {
    this.setState = () => {
      return;
    };
  }

  UNSAFE_componentWillMount() {
    this.getWorkShopList();
  }
  getWorkShopList = () => {
    const then = this;
    ERPDeliveryRecordService.workShopList()
      .then((res) => {
        if (res.data.code !== 200) {
          openModalMessage("warning", res.data.msg);
          return;
        }
        const workShopList = res.data && res.data.data ? res.data.data : [];
        this.setState({ workShopList });
      })
      .catch((err) => {
        openModalMessage("error", err.message);
      });
    //查询所有部门组装成级联选择框
    APIService.getDepartMents().then((data) => {
      // console.log('部门数据', data.data.data);
      const dataSource = data.data.data;
      const options = [];
      for (var value of dataSource) {
        var json = { label: value.name, value: value.id, children: [] };
        console.log("zhes", value);
        if (value.name == "仓库") {
          this.setState({
            warehouse: value.children,
          });
        }
        if (value.children.length !== 0) {
          for (var valueFirst of value.children) {
            var json2 = {
              label: valueFirst.name,
              value: valueFirst.id,
              children: [],
            };
            json.children.push(json2);
          }
        }
        options.push(json);
      }
      // console.log('部门最终数据', options);
      this.setState({
        options: options,
      });
    });
  };
  //初始化加载数据
  fetch = (pageNum = 1, pageSize = 100) => {
    this.setState({ loading: true });
    const { searchItem } = this.state;
    searchItem.pageNum = pageNum;
    searchItem.pageSize = pageSize;
    ERPDeliveryRecordService.getErpList(searchItem)
      .then((res) => {
        this.setState({ loading: false });
        // console.log(res);
        if (res.data.code !== 200) {
          openModalMessage("warning", res.data.msg);
          return;
        }
        this.setState({
          dataSource: res.data.data,
          total: res.data.total,
          pageNum,
          pageSize,
        });
      })
      .catch((err) => {
        openModalMessage("error", err.message);
      });
  };
  setLocationCode = (item) => {
    // console.log(item);
    const { searchItem } = this.state;
    searchItem.departmentId = item.departmentId;
    searchItem.isSure = 0;
    this.setState({ searchItem }, () => {
      this.fetch();
    });
  };
  // 高级查询
  advancedss = () => {
    // console.log('高级查询');
    this.setState({ advanced: !this.state.advanced });
  };

  handleSearch = (value) => {
    this.setState({ searchItem: value }, () => {
      this.fetch();
    });
  };
  loadData = (value, dataSource) => {
    console.log("在表格行编辑后保存的数据", value, dataSource);
  };
  // 详情
  particulars = (r, e) => {
    e.stopPropagation();
    this.props.history.push({
      pathname: "/ERPDeliveryRecordDetails",
      data: { acceptCode: r.acceptCode, details: r },
    });
  };
  resetForm = () => {
    this.formSearch && this.formSearch.resetFields();
    this.setState(
      { searchItem: { storeName: localStorage.getItem("department") } },
      () => {
        this.fetch();
      }
    );
  };
  // 刷新
  update = () => {
    const { control, control1 } = this.state;
    if (control) {
      localStorage.setItem("acceptPublishListSubmit", control1);
      this.setState({
        control: false,
      });
    }
    this.fetch();
  };
  render() {
    const {
      printRows,
      columnsInterior,
      dataSourceInterior,
      submitOweMaterial,
      ERPReturn,
      loadingDrawer,
      materialData,
      selectedRowKeys,
      showConceal,
      drawerVisible,
      drawerVisible1,
      visible,
      columns,
      loading,
      dataSource,
      advanced,
      selectedRowKeys1,
      formData,
      pageNum,
      pageSize,
      total,
      workShopList,
      selectedRows,
      buttons,
    } = this.state;
    return (
      <div>
        <BasicLayoutSearch>
          <TopForm
            onSearch={this.handleSearch}
            onClick4={this.advancedss}
            advanced={advanced}
            options={this.state.options}
            warehouse={this.state.warehouse}
            resetForm={this.resetForm}
            workShopList={this.state.workShopList}
            ref={(node) => (this.formSearch = node)}
          ></TopForm>
        </BasicLayoutSearch>
        <BasicLayout
          // name={`待发放物料-${localStorage.getItem('department')}`}
          name={`出库记录`}
          icon="table"
          buttons={null}
        >
          <TableCustomize
            rowSelection={null}
            columns={columns}
            rowKey={(record) => record.id}
            dataSource={dataSource}
            pagination={false}
            loading={loading}
            allowDrafting={true}
            // allowEditable={this.loadData}
            // expandedRowRender={expandedRowRender}
            // onRow={(record, index) => ({
            //     onClick: this.onExpand.bind(this, true, record)
            // })}
            // expandRowByClick={true}
            expandedRowKeys={this.state.row}
            scroll={{ x: true, y: 600 }}
            rowClassName={(record, index) => {
              return [
                "editable-row",
                index % 2 === 0 ? "editable-row" : "editable-row12",
              ];
            }}
          />
          <BasicPagination
            pageNum={pageNum}
            pageSize={pageSize}
            total={total}
            loadData={this.fetch}
          />
        </BasicLayout>
      </div>
    );
  }
}
export default Form.create()(withRouter(StayGrant));
